<template>
  <div flex>
    <dv-charts :option="option" style="width: 25rem; height: 15rem" />
    <div class="desc">123456</div>
  </div>
</template>

<script setup>
onMounted(() => {
  setInterval(updateData, 2000);
});

const updateData = () => {
  option.series[0].data[0].value = Math.floor(Math.random() * 100);
};

const option = reactive({
  title: {
    text: "剩余油量表",
    style: {
      fill: "#fff",
    },
  },
  series: [
    {
      type: "gauge",
      data: [{ name: "itemA", value: 55 }],
      center: ["50%", "55%"],
      axisLabel: {
        formatter: "{value}%",
        style: {
          fill: "#fff",
        },
      },
      axisTick: {
        style: {
          stroke: "#fff",
        },
      },
      animationCurve: "easeInOutBack",
    },
  ],
});
</script>
<style scoped lang="scss"></style>
